<template>
  <div class="reviews-management">
    <!-- 筛选栏 -->
    <div class="filter-bar">
      <el-form :inline="true" :model="filterForm">
        <el-form-item label="评分">
          <el-select v-model="filterForm.rating" placeholder="全部评分" clearable>
            <el-option label="全部" value="" />
            <el-option label="5星" value="5" />
            <el-option label="4星" value="4" />
            <el-option label="3星" value="3" />
            <el-option label="2星" value="2" />
            <el-option label="1星" value="1" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="回复状态">
          <el-select v-model="filterForm.replyStatus" placeholder="全部状态" clearable>
            <el-option label="全部" value="" />
            <el-option label="已回复" value="replied" />
            <el-option label="未回复" value="not_replied" />
          </el-select>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="searchReviews">搜索</el-button>
          <el-button @click="resetFilter">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 评价列表 -->
    <div class="reviews-list">
      <div v-for="review in filteredReviews" :key="review.id" class="review-card">
        <div class="review-header">
          <div class="user-info">
            <el-avatar :src="review.userAvatar" />
            <div class="user-details">
              <div class="username">{{ review.userName }}</div>
              <div class="review-time">{{ review.createTime }}</div>
            </div>
          </div>
          <div class="rating">
            <el-rate v-model="review.rating" disabled show-score />
          </div>
        </div>
        
        <div class="review-content">
          <p class="review-text">{{ review.content }}</p>
          <div v-if="review.images && review.images.length" class="review-images">
            <el-image
              v-for="(image, index) in review.images"
              :key="index"
              :src="image"
              :preview-src-list="review.images"
              class="review-image"
            />
          </div>
        </div>
        
        <div class="order-info">
          <span class="order-label">订单：</span>
          <span class="order-no">{{ review.orderNo }}</span>
          <span class="order-items">{{ review.orderItems }}</span>
        </div>
        
        <div v-if="review.reply" class="merchant-reply">
          <div class="reply-header">
            <el-icon><ChatDotRound /></el-icon>
            <span>商家回复：</span>
            <span class="reply-time">{{ review.replyTime }}</span>
          </div>
          <p class="reply-content">{{ review.reply }}</p>
        </div>
        
        <div class="review-actions">
          <el-button
            v-if="!review.reply"
            type="primary"
            size="small"
            @click="showReplyDialog(review)"
          >
            回复
          </el-button>
          <el-button
            v-else
            size="small"
            @click="showReplyDialog(review)"
          >
            修改回复
          </el-button>
        </div>
      </div>
    </div>

    <!-- 回复对话框 -->
    <el-dialog
      v-model="showReplyDialogVisible"
      title="回复评价"
      width="500px"
      @close="resetReplyForm"
    >
      <div v-if="selectedReview" class="reply-dialog-content">
        <div class="original-review">
          <div class="review-info">
            <span class="username">{{ selectedReview.userName }}</span>
            <el-rate :model-value="selectedReview.rating" disabled />
          </div>
          <p class="review-text">{{ selectedReview.content }}</p>
        </div>
        
        <el-form ref="replyFormRef" :model="replyForm" :rules="replyRules">
          <el-form-item label="回复内容" prop="content">
            <el-input
              v-model="replyForm.content"
              type="textarea"
              :rows="4"
              placeholder="请输入回复内容"
              maxlength="200"
              show-word-limit
            />
          </el-form-item>
        </el-form>
      </div>
      
      <template #footer>
        <el-button @click="showReplyDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitReply" :loading="replying">
          {{ selectedReview?.reply ? '修改回复' : '发送回复' }}
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const showReplyDialogVisible = ref(false)
const selectedReview = ref(null)
const replying = ref(false)
const replyFormRef = ref()

const filterForm = reactive({
  rating: '',
  replyStatus: ''
})

const replyForm = reactive({
  content: ''
})

const replyRules = {
  content: [
    { required: true, message: '请输入回复内容', trigger: 'blur' },
    { min: 5, message: '回复内容至少5个字符', trigger: 'blur' }
  ]
}

// 模拟评价数据
const reviews = ref([
  {
    id: 1,
    userName: '张三',
    userAvatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    rating: 5,
    content: '菜品很好吃，配送也很快，下次还会再来的！',
    images: [
      'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      'https://cube.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
    ],
    orderNo: 'ORD20231201001',
    orderItems: '宫保鸡丁、米饭',
    createTime: '2023-12-01 13:30:15',
    reply: '谢谢您的好评，我们会继续努力提供更好的服务！',
    replyTime: '2023-12-01 14:00:00'
  },
  {
    id: 2,
    userName: '李四',
    userAvatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    rating: 4,
    content: '味道不错，就是稍微有点咸，整体还是很满意的。',
    images: [],
    orderNo: 'ORD20231201002',
    orderItems: '麻婆豆腐、青菜',
    createTime: '2023-12-01 14:15:30',
    reply: null,
    replyTime: null
  },
  {
    id: 3,
    userName: '王五',
    userAvatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    rating: 3,
    content: '配送有点慢，菜品温度不够热，希望能改进。',
    images: [],
    orderNo: 'ORD20231201003',
    orderItems: '酸菜鱼、米饭',
    createTime: '2023-12-01 15:20:45',
    reply: null,
    replyTime: null
  }
])

const filteredReviews = computed(() => {
  return reviews.value.filter(review => {
    if (filterForm.rating && review.rating !== parseInt(filterForm.rating)) return false
    if (filterForm.replyStatus === 'replied' && !review.reply) return false
    if (filterForm.replyStatus === 'not_replied' && review.reply) return false
    return true
  })
})

const showReplyDialog = (review) => {
  selectedReview.value = review
  replyForm.content = review.reply || ''
  showReplyDialogVisible.value = true
}

const submitReply = async () => {
  if (!replyFormRef.value) return
  
  try {
    await replyFormRef.value.validate()
    replying.value = true
    
    // 模拟提交回复API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    selectedReview.value.reply = replyForm.content
    selectedReview.value.replyTime = new Date().toLocaleString('zh-CN')
    
    ElMessage.success('回复成功')
    showReplyDialogVisible.value = false
    resetReplyForm()
  } catch (error) {
    console.error('回复失败:', error)
  } finally {
    replying.value = false
  }
}

const resetReplyForm = () => {
  selectedReview.value = null
  replyForm.content = ''
  if (replyFormRef.value) {
    replyFormRef.value.resetFields()
  }
}

const searchReviews = () => {
  ElMessage.success('搜索完成')
}

const resetFilter = () => {
  Object.assign(filterForm, {
    rating: '',
    replyStatus: ''
  })
}

onMounted(() => {
  console.log('Reviews management mounted')
})
</script>

<style lang="scss" scoped>
.reviews-management {
  .filter-bar {
    background: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  
  .reviews-list {
    .review-card {
      background: white;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      
      .review-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        
        .user-info {
          display: flex;
          align-items: center;
          gap: 12px;
          
          .user-details {
            .username {
              font-weight: 600;
              color: #303133;
              margin-bottom: 4px;
            }
            
            .review-time {
              font-size: 12px;
              color: #909399;
            }
          }
        }
      }
      
      .review-content {
        margin-bottom: 16px;
        
        .review-text {
          color: #606266;
          line-height: 1.6;
          margin-bottom: 12px;
        }
        
        .review-images {
          display: flex;
          gap: 8px;
          
          .review-image {
            width: 80px;
            height: 80px;
            border-radius: 4px;
            cursor: pointer;
          }
        }
      }
      
      .order-info {
        font-size: 14px;
        color: #909399;
        margin-bottom: 16px;
        
        .order-label {
          font-weight: 500;
        }
        
        .order-no {
          color: #409eff;
          margin-right: 12px;
        }
      }
      
      .merchant-reply {
        background: #f8f9fa;
        border-radius: 6px;
        padding: 16px;
        margin-bottom: 16px;
        
        .reply-header {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 8px;
          font-size: 14px;
          color: #606266;
          
          .reply-time {
            margin-left: auto;
            font-size: 12px;
            color: #909399;
          }
        }
        
        .reply-content {
          color: #303133;
          line-height: 1.6;
          margin: 0;
        }
      }
      
      .review-actions {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
  
  .reply-dialog-content {
    .original-review {
      background: #f8f9fa;
      border-radius: 6px;
      padding: 16px;
      margin-bottom: 20px;
      
      .review-info {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;
        
        .username {
          font-weight: 600;
          color: #303133;
        }
      }
      
      .review-text {
        color: #606266;
        line-height: 1.6;
        margin: 0;
      }
    }
  }
}
</style> 